<template>
  <div class="baseInfo">
    <el-form ref="baseInfoForm" :model="formBaseInfo" :rules="formRules" label-width="100px">
      <el-form-item label="优惠券名称" prop="score_rule_remark">
        <el-input v-model="formBaseInfo.score_rule_remark" placeholder="请输入优惠券名称"></el-input>
      </el-form-item>
      <el-form-item label="权重" prop="data_weight">
        <el-select v-model="formBaseInfo.data_weight" placeholder="请选择权重">
          <el-option
            v-for="item in WeightValue"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="频度" prop="frequnce_days">
        <el-select v-model="formBaseInfo.frequnce_days" placeholder="请选择频度">
          <el-option
            v-for="item in Frequency"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="有效时间段" prop="time_begin">
        <el-date-picker
          v-model="timeValue"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="selectTime">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="满减金额" prop="key_4_use_rule">
        <div class="item-box">
          <div>
            <span>满:</span>
            <el-input v-model="formBaseInfo.key_4_use_rule" placeholder="满减金额"></el-input>
          </div>
          <div>
            <span>减:</span>
            <el-input v-model="formBaseInfo.value_4_use_rule" placeholder="立减金额"></el-input>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'BaseInfo',
  data() {
    return {
      formBaseInfo: {
        data_weight: null,
        frequnce_days: null,
        score_rule_remark: null,
        time_begin: null,
        time_end: null,
        key_4_use_rule: null,
        value_4_use_rule: null
      },
      formRules: {
        score_rule_remark: [
          { required: true, message: '请填写优惠券名称', trigger: 'blur' }
        ],
        time_begin: [
          { required: true, message: '请选择时间段', trigger: 'change' }
        ],
        data_weight: [
          { required: true, message: '请选择权重值', trigger: 'change' }
        ],
        frequnce_days: [
          { required: true, message: '请选择频度', trigger: 'change' }
        ],
        key_4_use_rule: [
          { required: true, message: '请填写满减金额', trigger: 'blur' }
        ]
      },
      /* 权重值 */
      WeightValue: [
        {value: 1000, label: '1000'},
        {value: 2000, label: '2000'},
        {value: 3000, label: '3000'},
        {value: 4000, label: '4000'},
        {value: 5000, label: '5000'},
        {value: 6000, label: '6000'}
      ],
      /* 频度 */
      Frequency: [
        {value: 1, label: '每天一次'},
        {value: 36500, label: '仅仅一次'}
      ],
      /* 有效时间段 */
      timeValue: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  mounted() {
  },
  methods: {
    selectTime(val) {
        console.log(val)
      val ? this.formBaseInfo.time_begin = val[0] : this.formBaseInfo.time_begin = null
      val ? this.formBaseInfo.time_end = val[1] : this.formBaseInfo.time_end = null
    }
  }
}
</script>

<style scoped lang="scss">
.baseInfo {
  padding: 36px;
  .el-form {
    .el-form-item {
      .el-input {
        width: 300px;
      }
      .item-box {
        display: flex;
        .el-input {
          width: 160px;
          margin-right: 20px;
        }
        span {
          margin-right: 10px;
        }
      }
    }
  }
}
::v-deep {
  .el-form-item__label {
    font-weight: normal;
    text-align: center;
  }
}
</style>
